<template>
  <div class="structure">
    <template v-for="(item,index) in btn">
      <el-button
        type="primary"
        :key="index"
        @click="handler(index)"
        v-if="item.isShow"
        style="margin:0px 0px 25px 0"
      >{{item.title}}</el-button>
    </template>
    <avue-crud
      ref="crud"
      style="width:100%"
      :page.sync="page"
      :data="loadData"
      :option="tableOption"
      :table-loading="loading"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <template slot="id" slot-scope="scope">
        <el-button type="text">{{scope.row.id}}</el-button>
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button @click="trend(scope.row)" type="text" icon="el-icon-picture-outline">趋势图</el-button>
      </template>
    </avue-crud>
    <el-dialog title="趋势图" :visible.sync="dialogVisible" width="65%" :destroy-on-close="true">
      <TrendChart :dataList="dataList" :dataX="dataX" :dataValue="dataValue" />
    </el-dialog>
  </div>
</template>

<script src='./structure.js'></script>

<style lang="less">
.structure {
  margin: 10px 0px;
}
</style>